﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网上商城</title>
    <link rel="stylesheet" href="./css/page4-2.css">
    <link rel="stylesheet" type="TEXT/css" href="./css/page4-hover.css">
</head>

<body style="overflow-x:hidden">
    <div class="home3 dream">
        <div class="navi">
            <img class="navipicture" src="./img/page4-1-img/1/导航栏 完整.png">
            <div class="navilist">
                <ul>
                    <li class="li1"> <a href="xiamanyou.html" class="naviziti">首页</a> </li>
                    <li class="li2"> <a href="page-2.html" class="naviziti">场馆介绍</a> </li>
                    <li class="li3"><a href="page-3.html" class="naviziti">IP介绍</a></li>
                    <li class="li4"><a href="#" class="naviziti"><img src="./img/page4-1-img/1/title发亮的那里.png" class="wenchuang"></a></li>
                    <li class="li5"> <a href="page-5.html" class="naviziti">相关动态</a> </li>
                    <li class="li6"> <a href="page-6.html" class="naviziti">关于我们</a> </li>
                </ul>
            </div>
        </div>
        <ul id="banner"></ul>
        <div class="yun">
            <img src="./img/page4-2-img/云 上.png" class="yunshang">
            <img src="./img/page4-2-img/云下.png" class="yunxia">
            <img src="./img/page4-2-img/云 中.png" class="yunzhong">
        </div>
        <!--img src="./大长条图片/底纹 2.png" class="dw1"-->
        <!--img src="./大长条图片/分割线.png" class="fengexian"-->
        <!--img src="./大长条图片/底纹 3.png" class="dw2">
        <img src="./大长条图片/底纹 4.png" class="dw3">
        <img src="./大长条图片/底纹 5.png" class="dw4"-->
        <!--img src="./大长条图片/金箔组.png" class="jb"-->
        <!--img src="./大长条图片/组 2 (2).png" class="fenlei"-->
        <!--img src="./大长条图片/组 (1).png" class="gundong"-->
        <!--分类栏*/-->
        <a href="#"><img src="./img/page4-1-img/2/组 1 (5).png" class="ipzhoubian hvr-grew"></a>
        <a href="#"><img src="./img/page4-1-img/2/组 2 (5).png" class="xvjiabu hvr-grew"></a>
        <a href=""><img src="./img/page4-1-img/2/组 3.png" class="shipin hvr-grew"></a>
        <a href=""><img src="./img/page4-1-img/2/组 4.png" class="shouzhangwenju hvr-grew"></a>
        <a href=""><img src="./img/page4-1-img/2/组 5.png" class="chashuigaodian hvr-grew"></a>
        <a href=""><img src="./img/page4-1-img/2/组 6.png" class="meizhuangchanpin hvr-grew"></a>
        <!--分类栏结束-->
        <a href="#"><img src="./img/page4-2-img/组 60.png" class="anniu1 hvr-bob"></a>
        <a href="#"><img src="./img/page4-2-img/组 61.png" class="anniu2 hvr-bob"></a>
        <a href="#"><img src="./img/page4-2-img/组 62.png" class="anniu4 hvr-bob"></a>
        <a href="#"><img src="./img/page4-2-img/组 63.png" class="anniu3 hvr-bob"></a>
        <a href="#"><img src="./img/page4-2-img/组 64.png" class="anniu5 hvr-bob"></a>
        <a href="#"><img src="./img/page4-2-img/组 65.png" class="anniu6 hvr-bob"></a>
        <a href="#"><img src="./img/page4-2-img/组 66.png" class="anniu7 hvr-bob"></a>
        <a href="#"><img src="./img/page4-2-img/组 67.png" class="anniu8 hvr-bob"></a>
        <!-- <img src="./大长条图片/组 81.png" class="tao hvr-grow"
        <img src="./大长条图片/组 84 (1).png" class="jinwangdian hvr-grow"> -->
        <a href="https://www.taobao.com/"><img src="./img/page4-2-img/淘.png" class="tao hvr-grow"></a>
        <a href="#"><img src="./img/page4-2-img/组 39 (1).png" class="shoubao hvr-grow"></a>
        <a href="#"><img src="./img/page4-2-img/组 (4).png" class="xiangnang hvr-grow"></a>
        <a href="#"><img src="./img/page4-2-img/组 41.png" class="bidai hvr-grow"></a>
        <a href="#"><img src="./img/page4-2-img/组 52.png" class="guazhui hvr-grow"></a>
        <a href="#"><img src="./img/page4-2-img/组 53.png" class="bubao hvr-grow"></a>
        <a href="#"><img src="./img/page4-2-img/组 1 (3).png" class="wenfangsibao hvr-grow"></a>
        <a href="#"><img src="./img/page4-2-img/组 55 (2).png" class="guantuanshan hvr-grow"></a>
        <a href="#"><img src="./img/page4-2-img/组 2 (1).png" class="shuqian hvr-grow"></a>
        <a href="#"><img src="./img/page4-2-img/组 56.png" class="fazan hvr-grow"></a>

    </div>

</body>

</html>
<script type="text/javascript">
    window.onload = function() {
        let timer = setInterval(get_next, 3000)
        let sz = new Array();
        let szdiv = new Array()
        var cur_ul = document.getElementById("banner");
        for (let i = 1; i <= 3; i++) {
            var cur_li = document.createElement("l1");
            var cur_img = document.createElement("img");
            cur_img.src = "img/page4-2-img/" + i + ".png";
            cur_img.style.width = "600px";
            cur_img.style.height = "300px";
            cur_li.appendChild(cur_img);

            cur_li.onmouseenter = function() {
                clearInterval(timer);
            }
            cur_li.onmouseleave = function() {
                timer = setInterval(get_next, 3000)
            }

            if (i != 3) {
                cur_li.id = 3 - i;
            } else {
                cur_li.id = 3;
            }

            cur_ul.appendChild(cur_li)
            sz.push(cur_li);
            sz[sz.length - 1].style.left = "0px";

            let bottom_div = document.createElement("circle");
            bottom_div.style.left = 480 + 50 * i + "px";
            bottom_div.name = i;
            szdiv.push(bottom_div)
            cur_ul.appendChild(bottom_div);
            cur_img.onclick = function tiaozhuan() {
                if (i = 1) {
                    location.href = 'http://zhidao.baidu.com/';
                } else if (i = 2) {
                    location.href = 'https://www.bilibili.com/';
                } else {
                    location.href = 'https://www.zhihu.com/';
                }
            }
        }

        let pre_img = document.createElement("img")
        pre_img.src = "img/page4-2-img/00.png";
        pre_img.style.position = "absolute";
        pre_img.style.left = 0;
        pre_img.style.top = 0;
        pre_img.style.bottom = 0;
        pre_img.style.margin = "auto"
        pre_img.style.zIndex = 99;
        cur_ul.appendChild(pre_img);

        let nex_img = document.createElement("img")
        nex_img.src = "img/page4-2-img//01.png";
        nex_img.style.position = "absolute";
        nex_img.style.right = 0;
        nex_img.style.top = 0;
        nex_img.style.bottom = 0;
        nex_img.style.margin = "auto"
        nex_img.style.zIndex = 99;
        cur_ul.appendChild(nex_img);

        pre_img.onclick = function() {
            clearInterval(timer);
            get_pre();
            i = i - 1;
            timer = setInterval(get_next, 3000)
        }

        nex_img.onclick = function() {
            clearInterval(timer);
            get_next();
            i = i + 1;
            timer = setInterval(get_next, 3000)
        }


        let len = sz.length - 1;
        sz[len - 2].style.left = "0px";
        sz[len - 1].style.zIndex = 99;
        sz[len - 1].style.left = "300px";
        sz[len - 1].style.transform = "scale(1.3)";
        sz[len].style.left = "600px";

        szdiv[0].style.background = "lightslategray"

        for (let i = 0; i < szdiv.length; i++) {
            szdiv[i].onmouseenter = function() {
                clearInterval(timer);
                let len1 = sz[len - 1].id;
                let len2 = szdiv[i].name;
                let dis = Math.max(len1, len2) - Math.min(len1, len2)
                if (len1 > len2) {
                    while (dis--)
                        get_pre()
                } else {
                    while (dis--)
                        get_next()
                }
                timer = setInterval(get_next, 3000)
            }
        }


        function get_pre() {
            let give_up = sz[0];
            sz.shift()
            sz.push(give_up)
            for (let i = 0; i < sz.length; i++) {
                sz[i].style.zIndex = i;
                sz[i].style.transform = "scale(1)"

            }
            sz[len - 2].style.left = "0px";
            sz[len - 1].style.zIndex = 99;
            sz[len - 1].style.left = "300px";
            sz[len - 1].style.transform = "scale(1.3)"
            sz[len - 1].style.opacity = 1;
            sz[len].style.left = "600px";

            sync_szdiv()

        }

        function get_next() {
            let give_up = sz[len];
            sz.pop()
            sz.unshift(give_up)
            for (let i = 0; i < sz.length; i++) {
                sz[i].style.zIndex = i;
                sz[i].style.transform = "scale(1)"

            }
            sz[len - 2].style.left = "0px";
            sz[len - 1].style.zIndex = 99;
            sz[len - 1].style.left = "300px";
            sz[len - 1].style.transform = "scale(1.3)"
            sz[len - 1].style.opacity = 1;
            sz[len].style.left = "600px";
            sync_szdiv()


        }


        function sync_szdiv() {
            for (let i = 0; i < szdiv.length; i++) {
                if (szdiv[i].name == sz[len - 1].id)
                    szdiv[i].style.background = "lightslategray";
                else
                    szdiv[i].style.background = "white"
            }
        }


    }
</script>